<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2593132_j29vcvk8n6a.css">
</head>
<style>
    *{
        padding: 0;
        margin: 0;

    }
    :root{
        --color: #3370ff;   
       
    }
    .login{
        width: 444px;
        height: 580px;
        margin:  0 auto;
        padding-left: 32px;
        padding-right: 32px;
        box-shadow: 0 0 50px #ccc;
        box-sizing: border-box;
    }
    .login h1{
        padding-top: 56px;
    }
    .base{
        font-size: 13px;
        color: #646a73;
        margin-top: 14px;
        line-height: 18px;
   
    }
    .login a{
        text-decoration: none;
        color: var(--color)
    }
    .iphone{
        margin-top: 30px;
    }
    .iphonee{

        padding-bottom: 5px;
        color: var(--color);
        border-bottom: 3px solid var(--color);
    }
    .iphone a:last-child{
        padding-left: 20px;
        color: #646a73;
    }
    .num{
        width: 380px;
        height: 200px;
        box-sizing: border-box;
        margin-top: 20px;
        position: relative;
        overflow: hidden;
       
    }
    .num2{
        width: 380px;
        height: 45px;
        box-sizing: border-box;
        margin-top: 20px;
        position: relative;
        overflow: hidden;
       
    }
    input{
        width: 70%;
        height: 12%;
        border: 1px solid #ccc;
        border-radius: 7px;
        outline-color: var(--color);
        text-indent: 5px;
        font-size: 20px;
        /* margin: 10px 0; */
    }
    .while{
        margin-top: 9px;
        color: white;
        background-color: #ccc;
        outline: none;
        border: none;
        border-radius: 7px;
        cursor: not-allowed;
       
  
    }

    p{
        margin-top: 10px;
        font-size: 14px;
        color: #ff5b4c
    }
    .pp{
        border: 3px solid #ff5b4c;
    }       
    .hide{
        display: none;
    }
    
    .n:hover{
        opacity: 0.9;
    }
    /* 86+ */
    .baliu{
        position: absolute;
        top: 11px;
        left: 7px;  
        border-right: 1px solid #ccc;
        padding-right: 8px;
    }
        /* 86+ 字体*/
    .icon-sanjiaoxing{
        font-size: 10px;
        padding-left: 7px;
    }
    .fColor{
        font-size: 12px;
        color: red;
        
    }
    a{
        direction: none;
    }
    .hide{
        display: none;
    }
    .reinput{
        padding-top: 20px;
    }
    .green{
        font-size: 12px;
        color: #3370ff;
    }
    .allow{
        background-color: #3370ff;
        cursor: pointer;
    }
</style>
<body>
  <div class="login">   
    <h1>欢迎注册明德教务账号</h1>

    <div class="base">

    <span>注册即代表你已阅读并同意</span>
    <span><a  href="#" >服务协议</a>
    <span> 和</span>
    <a  href="#" >隐私政策</a></span></div>
<div class="iphone">

    <a href="#"><span class="iphonee">学生端</span></a>
    <a href="#"><span>教务人员</span></a>

</div>  
<!-- <form action="/registerOn" method="POST">
    <div class="num">
       学员号:<input type="text" name="username" autocomplete="off" ><br>   
       邮箱:<input type="text" name="useremail" autocomplete="off" ><br>
         <span style="padding-right: 8px;">密 码</span>: <input type="text" name="password" autocomplete="off"> <br>
         <span style="padding-right: 8px;">确认密码</span>: <input type="text" name="" autocomplete="off"> 
      
    </div>
    头像:<input type="file" name="fo_file" class="morefile"><br>
    <p class="hide" id="p">请输入有效的电话号码</p>
    <div class="change">    
        <button class="num2 while ";>下一步</button>
    </div>
</form> -->
<form action="" enctype="application/x-www-form-urlencoded">
    <div class="reinput">
    <span>用户名:</span> <input type="text" id="user" autocomplete="off"><br><span id="pointUser" class="hide fColor">最少7位，不能出现特殊字符</span> <br>
    <span>注册邮箱:</span> <input type="text" name="" id="eamil" autocomplete="off"><br><span id="pointEamil" class="hide fColor">邮箱格式不正确</span> <br>
    <span>设置密码:</span> <input type="text" id="password" autocomplete="off"><br><span id="pointOne" class="hide fColor">设置密码必须含有大写小写和字母的6位数以上的密码</span><br>
    <span>验证密码:</span> <input type="password" id="repass" autocomplete="off"><br> <span id="point" class="hide fColor">前后密码不对</span><br>
    <!-- <input type="submit" class="num2 while " id="btn"> -->
    <button class="num2 while " id="btn"  >注册</button>
</div>
</form>
<div class="base"><span>已有账号?</span><a href="/" style="text-decoration: underline;"  ><span>立即登录</span></a></div>

</div>

</body>
<script>
    let pass1 = document.getElementById("password")
    let repass = document.getElementById("repass")
    let btn = document.getElementById("btn")
    let pointpass=document.getElementById("point")
    let pointOne=document.getElementById("pointOne")
    let user=document.getElementById("user")
    let pointUser=document.getElementById("pointUser")
    let pointEamil=document.getElementById("pointEamil")
    let eamil=document.getElementById("eamil")
    let fourinput=document.querySelectorAll(".reinput input")
    let tryEle=document.getElementsByClassName("reinput")[0]
    let sub1 = false; //用户
    let sub2 = false; //邮箱
    let sub3 = false; //密码 1
    let sub4 = false;//密码2

    let useRe = /\w{7,}/
    let emailRe = /^[a-zA-Z\d]+([-_.][A-Za-z\d]+)*@[a-zA-Z0-9]{1,6}.([c,o,m]{3})|([c,n]{2})$/
    let passwordRe1 = /[a-z]{1,}/
    let passwordRe2 = /[A-Z]{1,}/
    let passwordRe3 = /[0-9]{1,}/
    btn.disabled=true;
    //二次密码验证
    repass.onfocus=function(){
        pointpass.classList.add("hide")
    }
    repass.onblur=function(){
        if(repass.value !== pass1.value){
           pointpass.classList.remove("hide")
           sub4=false;
        }else{
            pointpass.classList.add("hide")
            sub4=true;
        }
        listen()
    }
 
    //一次密码验证
    pass1.onfocus=function(){
        pointOne.classList.add("hide")
    }
    pass1.onblur=function(){
      var  pass=pass1.value
        if(pass.value !="" && passwordRe1.test(pass) && passwordRe2.test(pass) && passwordRe3.test(pass) &&pass.length>=6){
                pointOne.classList.add("hide")
                sub3=true;    
        }else if(pass ==""){
            pointOne.classList.add("hide")
        }else{
            pointOne.classList.remove("hide")
                sub3=false; 
        } 

        listen()
    }

    //验证用户
    user.onblur=function(){
        if(useRe.test(user.value)){
            pointUser.classList.add("hide")
            sub1=true
        }else if(user.value ==""){
            pointUser.classList.add("hide")
        }else{
            pointUser.classList.remove("hide")
            sub1=false
        }
        listen()
    }
    user.onfocus=function(){
        pointUser.classList.add("hide")
    }
   
    //验证邮箱
    eamil.onblur=function(){

        if(emailRe.test(eamil.value)){
            pointEamil.className = "green"
            pointEamil.innerText ="正在加载中"
            //进入数据库验证
            let xhr =new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if(this.readyState == 4 && this.status == 200){
                      let res= JSON.parse( this.responseText)
                      console.log(res)
                       if(res.is_pass == "1000" ){
                        pointEamil.innerText ="恭喜您,此邮箱可用"
                        pointEamil.className = "green"
                        sub2=true;
                     }else{
                        pointEamil.innerText ="抱歉,该邮箱已被占用"
                        pointEamil.className = "fColor";
                     }
                }
            }
            xhr.open("post","/confir",true);
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
            xhr.send(`eamil=${eamil.value}`);
        }else if(eamil.value ==""){
            pointEamil.classList.add("hide")
        }else{
            pointEamil.classList.remove("hide")
            pointEamil.classList.replace("green","fColor")
        }
 listen()
    }
    eamil.onfocus=function(){
        pointEamil.classList.add("hide")
        pointEamil.innerText ="邮箱格式不正确"
     
        
    }

    //提交表单
    btn.onclick = function (event) {     
        event.preventDefault();
        this.disabled=false;
        if(sub1 &&sub2&&sub3&&sub4){
            let xhr =new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if(this.readyState == 4 && this.status == 200){
                    let result =JSON.parse(this.responseText)
                    if(result.re_stat =="1001"){
                        alert("提交成功")
                        location.href="/login"
                    }else{

                        alert("提交失败")
                        this.disabled=true;
                    }
                }
            }
            xhr.open("post","/registerOn",true);
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
            xhr.send(`useremail=${eamil.value}&password=${pass1.value}&username=${user.value}`);
            // alert("提交成功")
            return
        }else{  
            alert("请正确填写")
            return false
        }
    }
    tryEle.oninput=function(){
        console.log("12311")
        if(sub1 &&sub2&&sub3&&sub4){
            // console.log(sub1,sub2,sub3,sub4)
            btn.classList.add("allow");
            return
        }
        btn.classList.remove("allow")
    }
    function listen(){
        if(sub1 &&sub2&&sub3&&sub4){
            // console.log(sub1,sub2,sub3,sub4)
            btn.classList.add("allow");
            btn.disabled=false;
            return
        }
        btn.classList.remove("allow")
        btn.disabled=true;
    }
</script>
</html>